<template>
  <div class="scroll-wrap" ref="wrap">
    <div class="scroll-content" ref="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollView',
  mounted () {
    this._initScrollEvent()
  },
  beforeDestroy () {
    this.$refs.wrap.removeEventListener('scroll', this._scrollEvent)
  },
  methods: {
    _initScrollEvent () {
      this.$refs.wrap.addEventListener('scroll', this._scrollEvent)
    },
    _scrollEvent (e) {
      const scrollY = this.$refs.wrap.scrollTop
      const viewHeight = this.$refs.wrap.clientHeight
      const bodyHeight = this.$refs.content.clientHeight
      if (scrollY + viewHeight === bodyHeight) {
        this.$emit('scrollBottom')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-wrap {
  @include wh(100%, 100%);
  overflow: auto;
}
</style>
